/* CSS Document */
@import url("reset.css");
html                       { -webkit-font-smoothing: antialiased; font-smoothing:antialiased; overflow-y: scroll; }
body                       { font-size: 75%; color: #222; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; line-height: 1.22; color: #495357; background: url(../img/background.jpg) repeat-x #fff; }
.page                      { width: 960px; margin: auto; }
header                     { height: 135px; overflow: hidden; background: url(../img/header_bg.jpg) no-repeat center; }
header .logo               { width: 280px; float: left; height: 135px; }
header .logo img           { margin: 20px 0 0 0 }
header nav                 { width: 360px; float: right; height: 135px; margin-right: 40px; }
header nav ul              { background: #6ab9ec; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 5px 20px 5px 10px; margin-top: 40px; }
header nav ul li           { display: inline; list-style: none; }
header nav ul li a         { color: #000; display: inline-block; font-size: 14px; padding: 12px; margin: 0 10px 0 0; text-decoration: none; color: #fff}
header nav ul li a:hover   { background: #9fd0f0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-decoration: underline; }
header nav ul li .current  { font-weight: bold }
footer                     { height: 100px; background: #f5f5f5 url(../img/footer_bg.jpg) no-repeat center top; }
footer address             { padding-top: 20px; float: left; width: 300px; }
footer .about              { padding-top: 20px; float: right; width: 300px; text-align: right; line-height: 1.4em; }
#banner                    { height: 264px; padding: 10px 0 10px 0; }
#content                   { padding: 0 }
#home h1                   { position: absolute; left: -9999px; }
#home .quote               { padding:0 140px 30px 140px; border-bottom: 1px solid #ebebeb; }
blockquote                 { font: 1.4em/1.6em Georgia, "Times New Roman", Times, serif; font-style: italic; }
cite                       { font-style: normal; text-align: right; display: block; padding-right: 60px; font-size: 1.6em; margin-top:0; }
cite:before                { content: "- " }
.qstart                    { float: left; height: 45px; margin-top: -20px; padding-top: 45px; margin-bottom: -50px; margin-right: 20px; font-size: 500%; font-family: Arial, sans-serif; font-style: normal; }
.qend                      { content: open-quote; font-family: Arial, Helvetica, sans-serif; line-height:0; margin: 18px00 330px; vertical-align: bottom; font-size: 500%; font-family: Arial, Helvetica, sans-serif; font-style: normal; display: block; }
.cols4                     { overflow: hidden; padding-top: 30px; }
.cols4 .col                { width: 225px; margin-right: 20px; float: left; }
.cols4 .first              { margin-left: 0; padding-left: 0; }
.cols4 .last               { margin-right: 0; padding-right: 0; }
.cols4 span                { -webkit-border-radius: 30px; display: block; background-color: #465256; line-height: 30px; height: 30px; width: 30px; text-align: center; font-weight: bold; float: left; margin: 2px 10px 0 0; color: #fff; -webkit-border-radius: 1.5em; -moz-border-radius: 1.5em; border-radius: 1.5em; font-weight: 700; }
/*---Headers-- */
h1                         { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2                         { font-size: 1.6em; margin-bottom: 0.2em; }
h3                         { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4                         { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5                         { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6                         { font-size: 1em; font-weight: bold; }
/*---Misc-- */
p                          { margin: 0 0 1.5em; line-height: 1.6em; }
strong, dfn                { font-weight: bold }
em, dfn                    { font-style: italic }
hr                         { background: #ddd; color: #ddd; clear: both; float: none; width: 100%; height: 1px; margin: 0 0 17px; border: none; }
table                      { font-size: inherit; font: 100%; }
td   					   { vertical-align: top; }

select, input, textarea    { font: 99% sans-serif }
.clear                     { clear: both }
.left                      { float: left }
.right                     { float: right }
.top                       { margin-top: 0; padding-top: 0; }
.bottom                    { margin-bottom: 0; padding-bottom: 0; }
@media only screen and (max-width: 1020px) and (min-width: 768px){ 
    .page          { width: 768px }
    body           { background: url(../img/header_bg.jpg) no-repeat center top }
    header         { background: none }
    #banner img    { width: 768px }
    #home .quote   { padding:0 100px 10px 100px; border-bottom: 1px solid #ebebeb; }
    footer address { padding-top: 20px; float: left; width: 300px; }
    footer .about  { padding-top: 20px; float: right; width: 300px; text-align: right; line-height: 1.4em; }
    .cols4         { overflow: hidden; padding-top: 10px; }
    .cols4 .col    { width: 184px; margin-right: 10px; float: left; }
}
@media only screen and (max-width: 767px) and (min-width: 480px){ 
    .page          { width: 480px }
    body           { background: url(../img/header_bg.jpg) no-repeat center top }
    header         { background: none; height: auto; }
    header nav     { clear: both; width: 480px; margin: 0; height: auto; }
    header nav ul  { margin: 0 }
    #banner img    { width: 480px }
    #home .quote   { padding:0 10px 10px 10px; border-bottom: 1px solid #ebebeb; }
    footer address { padding-top: 20px; float: left; width: 200px; }
    footer .about  { padding-top: 20px; float: right; width: 200px; text-align: right; line-height: 1.4em; }
    .cols4         { overflow: hidden; padding-top: 10px; }
    .cols4 .col    { width: 480px }
}
@media only screen and (max-width: 479px) and (min-width: 320px){ 
    .page              { width: 300px; padding: 0 10px 0 10px; }
    body               { background: url(../img/header_bg.jpg) no-repeat center top }
    header             { background: none; height: auto; }
    header nav         { clear: both; width: 300px; margin: 0; height: auto; }
    header nav ul      { margin: 0 }
    header nav ul li a { color: #000; display: inline-block; font-size: 13px; padding: 5px; margin: 0 5px 0 0; text-decoration: none; color: #fff; }
    #banner img        { width: 300px }
    #home .quote       { padding:0 10px 10px 10px; border-bottom: 1px solid #ebebeb; }
    footer address     { padding-top: 20px; float: left; width: 150px; }
    footer .about      { padding-top: 20px; float: right; width: 150px; text-align: right; line-height: 1.4em; }
    .cols4             { overflow: hidden; padding-top: 10px; }
    .cols4 .col        { width: 300px }
}